import React, { useState, useEffect } from 'react'
import { Select, Input, Button, Form } from 'antd'
import api from '../../../api/activityManage'

const { Option } = Select

const EditChannelModal = ({actId,getList,goBack,form}) => {
    const [state, setState] = useState({
		projectTypeArr:[],//项目类型数组
		userTypeArr:[
			{id:1,name:'老用户'},
			{id:2,name:'新用户'}
		],
		gifsArr:[],//兑奖情况
	});

    //更新state
    const updateState = (newState) => {
        let data = JSON.parse(JSON.stringify(state))
        setState(Object.assign({}, data, newState))
	}
	useEffect(()=>{
		console.log(999,actId)
		if(actId){//活动管理列表跳过来才会有搜索栏
            //获取已兑换奖品列表
            let getGoodsAllList = new Promise((resolve, reject) => {
					api.getGoodsAllList({actId:actId},(res)=>{
						if(res){
							resolve(res)
						}else{
							resolve([])
						}
					})
            })
            //获取项目类型
            let getProjectType = new Promise((resolve, reject) => {
				api.getProjectType({status:1},(res)=>{
					if(res){
						resolve(res)
					}else{
						resolve([])
					}
				})
            })
            Promise.all([getGoodsAllList,getProjectType]).then((res) => {
                updateState({
					gifsArr:res[0],
					projectTypeArr:res[1],
                })
            }).catch((error) => {
                console.log(333,error)
            })
		}
	},[actId])
	//查询
    const handleSubmit = (e) => {
        e.preventDefault();
        form.validateFields((err, values) => {
            if (!err) {
				getList(values)
				console.log(values)
            }
        })
	}
	//刷新
	const refresh = () =>{
		form.resetFields()
        form.validateFields((err, values) => {
            if (!err) {
				getList(values)
				console.log(values)
            }
        })
	}
    //关闭模态框
    const { getFieldDecorator } = form;
    return (
			<Form layout="inline" onSubmit={handleSubmit}>
				{actId?
					<div>
						<Form.Item>
							{getFieldDecorator('name', {

							})(
								<Input style={{ width: 200 }} placeholder="用户名称" maxLength={20} allowClear />,
							)}
						</Form.Item>
						<Form.Item>
							{getFieldDecorator('phone', {
								
							})(
								<Input style={{ width: 200 }} placeholder="手机号码" allowClear />,
							)}
						</Form.Item>
						<Form.Item>
							{getFieldDecorator('userType', {
								
							})(
								<Select style={{ width: 200 }} placeholder="用户类型" allowClear>
									{state.userTypeArr.map((v,i)=>{
										return (
											<Option key={i} value={v.id}>{v.name}</Option>
										)
									})}
								</Select>
							)}
						</Form.Item>
						<Form.Item>
							{getFieldDecorator('projectTypeId', {
								
							})(
								<Select style={{ width: 200 }} placeholder="项目类型" allowClear
									showSearch
									optionFilterProp="children"
									filterOption={(input, option) =>
										option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
									}
								>
									{state.projectTypeArr.map((v,i)=>{
										return (
											<Option key={i} value={v.id}>{v.name}</Option>
										)
									})}
								</Select>
							)}
						</Form.Item>
						<Form.Item>
							{getFieldDecorator('goodsId', {
								
							})(
								<Select style={{ width: 200 }} placeholder="已兑换奖品" allowClear>
									{state.gifsArr.map((v,i)=>{
										return (
											<Option key={i} value={v.id}>{v.name}</Option>
										)
									})}
								</Select>
							)}
						</Form.Item>
					</div>
				:''}
				<Form.Item>
					<Button type="primary" onClick={goBack}>返回</Button>
					<Button type="primary" style={{marginLeft:16}} onClick={refresh}>刷新</Button>
					{actId?
						<Button style={{marginLeft:16}} type="primary" htmlType="submit">查询</Button>
					:''}
				</Form.Item>
			</Form>
    )
}

export default Form.create({})(EditChannelModal)